/**
 * @description 行政区域-新增弹窗
 * @author 李艳
 */

import React, {Component} from 'react'
import {Form, Input, InputNumber, Modal} from 'antd';
import SearchTable from "../../../commons/components/SearchTable";
import {countryConfig} from "../../../configs/CommonComponentsConfig";

const FormItem = Form.Item;

class EditRegionModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            modalVisible: false,
            confirmLoading: false,
            code:"",
            name:""
        }
    }

    handleClose = () => {
        this.props.form.resetFields();
    };

    componentDidMount() {
        this.props.onRef(this);
      this.setState({code:"",name:""})
    }
    selectChange=(record)=>{
        this.setState({code:record.code,name:record.name})
    };
    render() {
        const formItemLayout = {
            labelCol: {
                span: 7
            },
            wrapperCol: {
                span: 14
            },
        };

        const {confirmLoading, modalVisible, handleOk, handleCancel, defaultValue,isAddRoot} = this.props;
        const {getFieldDecorator} = this.props.form;
        let title = "新增节点";
        let FormValue=defaultValue;
        if (isAddRoot){
            title="新增根节点";
            FormValue={}
        }
        return (
            <div>
              <Modal title={title}
                     visible={modalVisible}
                     onOk={handleOk}
                     onCancel={handleCancel}
                     width={500}
                     afterClose={this.handleClose}
                     confirmLoading={confirmLoading}
                     maskClosable={false}
              >
                <Form>
                  {!isAddRoot && <FormItem
                    {...formItemLayout}
                    style={{display:'none'}}
                    label="countryId">
                    {getFieldDecorator('countryId', {
                      initialValue: FormValue.countryId ?  FormValue.countryId: "",
                    })(
                      <Input/>
                    )}
                  </FormItem>}
                  <FormItem
                    {...formItemLayout}
                    label="代码">
                    {isAddRoot ? getFieldDecorator('code', {
                      initialValue: this.state.code
                    })(
                      <Input disabled={isAddRoot}/>
                    ):getFieldDecorator('code', {
                      initialValue: this.state.code,
                      rules: [{required: true, message: '请填写代码!'},{max:10,message:"不超过10个字符"}]
                    })(
                      <Input/>
                    )}
                  </FormItem>
                  {/*之前的写法如果在新增根节点时不填写任何数据点击保存，表单提示之后再填写数据会出问题，原因是新增根节点和新增节点的控件都一起初始化相互影响*/}
                  {isAddRoot?[<FormItem
                      {...formItemLayout}
                      label="名称">
                      {getFieldDecorator('countryId', {
                        rules: [{required: true, message: '请选择名称!'}]
                      })(
                        <SearchTable config={countryConfig} selectChange={this.selectChange} initValue={false}/>
                      )}
                    </FormItem>,<FormItem
                      {...formItemLayout}
                      label="名称"
                      style={{display:'none'}}
                    >
                      {getFieldDecorator('name', {
                        initialValue: this.state.name
                      })(<Input/>)}
                    </FormItem>]:
                    <FormItem
                      {...formItemLayout}
                      label="名称">
                      {getFieldDecorator('name', {
                        rules: [{required: true, message: '请填写名称!'},{max:50,message:"不超过50个字符"}]
                      })(
                        <Input/>
                      )}
                    </FormItem>}
                  <FormItem
                    {...formItemLayout}
                    label="排序">
                    {getFieldDecorator('rank', {
                      rules: [{required: true, message: '请填写排序!'}]
                    })(
                      <InputNumber precision={0} min={0} max={999999999} style={{width:"100%"}}/>
                    )}
                  </FormItem>
                  <FormItem
                    {...formItemLayout}
                    label="缩写">
                    {getFieldDecorator('shortName', {
                    })(
                      <Input/>
                    )}
                  </FormItem>
                  <FormItem
                    {...formItemLayout}
                    label="拼音">
                    {getFieldDecorator('pinYin', {
                    })(
                      <Input/>
                    )}
                  </FormItem>
                  <FormItem
                    {...formItemLayout}
                    style={{display:'none'}}
                    label="parentId">
                    {getFieldDecorator('parentId', {
                      initialValue: FormValue.id ?  FormValue.id: null,
                    })(
                      <Input/>
                    )}
                  </FormItem>
                </Form>
              </Modal>
            </div>
        );
    }
}

EditRegionModal = Form.create()(EditRegionModal);
export default EditRegionModal;
